import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment, { isDate } from 'moment';
import router from 'umi/router';
import { Form, Input, Select, Button, Collapse } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { queryFileList, formatPrice, queryDict } from '@/utils/common';
import classNames from 'classnames';
import { formatCodeVal } from '@/pages/Common/common';
import { allDictList } from '@/utils/constans';

const FormItem = Form.Item;
const { Option } = Select;
const Panel = Collapse.Panel;
const dateFormat = 'YYYY-MM-DD';
@connect(({ tmsOil, component }) => ({
  tmsOil,
  dictObject: component.dictObject,
}))
@Form.create()
class OilDetails extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      papersDetails: {},
      checkId: '',
      loading: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
      activeKey: ['1', '2'],
      paperType: {},
      vehicleDriver: [],
      paperTypeHandle: '',
      deleteFileIds: [],
    };
  }
  componentDidMount() {
    this.setState({
      checkId: this.props.checkId,
    });
    this.queryFileList(this.props.checkId);
  }
  componentWillMount() {
    // 查询字典项
    const allDict = [allDictList.currencyType, allDictList.saleCompany, allDictList.oilType];
    queryDict({ props: this.props, allDict });
  }

  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'OIL_MANA' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };

  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  render() {
    const { previewVisible, previewImage, fileList, papersDetails, vehicleDriver } = this.state;
    const {
      isMobile,
      tmsOil: { selectDetails },
      checkId,
      dictObject,
      isRefresh
    } = this.props;
    const details = selectDetails && checkId ? selectDetails[checkId] : {};
    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };
   // console.log('details----details--',details)
    const currencyType = details
      ? formatCodeVal(dictObject[allDictList.currencyType], details.currencyType)
      : '';
    const oilSiteName = details
      ? formatCodeVal(dictObject[allDictList.saleCompany], details.oilSiteName)
      : '';
    const oilType = details ? formatCodeVal(dictObject[allDictList.oilType], details.oilType) : '';
    const price = details ? formatPrice(details.price) : '';
    const totalFee = details ? formatPrice(details.totalFee) : '';
    const oilAmount = details ? formatPrice(details.oilAmount) : '';
    const avgHundredConsump = details ? formatPrice(details.avgHundredConsump) : '';
    const currentOilCardMoney = details ? formatPrice(details.currentOilCardMoney) : '0';
    const afterOilCardMoney = details ? formatPrice(details.afterOilCardMoney) : '0';

    const fieldsCost = [
      { key: oilSiteName, name: '加油站名称', isConst: true },
      { key: 'oilTime', name: '加油时间' },
      { key: oilType, name: '加油方式', isConst: true },
      { key: 'oilCardNo', name: '油卡号' },
      { key: 'oilPerson', name: '加油人' },
      { key: 'mileage', name: '当前里程（KM）' },
      { key: oilAmount, name: '加油量 （升）', isConst: true },
      { key: currencyType, name: '币种', isConst: true },
      { key: price, name: '单价', isConst: true },
      { key: totalFee, name: '消费金额', isConst: true },
      { key: avgHundredConsump, name: '本次油耗', isConst: true },
      { key: currentOilCardMoney, name: '交易前余额', isConst: true },
      { key: 'remarks', name: '备注', isConst: true },
      { key: afterOilCardMoney, name: '交易后余额', isConst: true },
      { key: 'attachments', name: '票据', isRow: true, isFile: fileList },
    ];
    const fieldsBasic = [
      { key: 'oilNo', name: '单据号码', isRow: true },
      { key: 'cartPlateNo', name: '车牌号' },
      { key: 'ownCompanyName', name: '公司' },
      { key: 'archivesNo', name: '行车档案号' },
      { key: 'settlementDate', name: '结算周期' },
    ];
    return (
      <div className={styles.CollapseDetails}>
        <PageHeaderWrapper>
          <Collapse
            activeKey={this.state.activeKey}
            onChange={key => this.callback(key)}
            bordered={false}
          >
            <Panel header="基础信息" key="1" className={styles.customPanelStyle}>
              <div>
                <DetailsList
                  isMobile={isMobile}
                  detilsData={{
                    fields: fieldsBasic,
                    value: details,
                  }}
                />
              </div>
            </Panel>
            <Panel header="费用详情" key="2" className={styles.customPanelStyle}>
              <div>
                <DetailsList
                  isMobile={isMobile}
                  detilsData={{
                    fields: fieldsCost,
                    value: details,
                    fileList: this.state.fileList,
                  }}
                />
              </div>
            </Panel>
          </Collapse>
        </PageHeaderWrapper>
      </div>
    );
  }
}
export default OilDetails;
